<!--设置-账号信息-->
<template>
  <div class="account-settings">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>账号信息</span>
      </div>

      <el-form ref="accountForm" :model="accountForm" label-width="100px">
        <el-form-item label="账号：">
          <el-input v-model="accountForm.account" disabled></el-input>
        </el-form-item>

        <el-form-item label="平台名称：">
          <el-input v-model="accountForm.platformName" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="saveAccountInfo">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card" style="margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span>修改密码</span>
      </div>

      <el-form ref="passwordForm" :model="passwordForm" :rules="passwordRules" label-width="100px">
        <el-form-item label="原始密码：" prop="oldPassword">
          <el-input v-model="passwordForm.oldPassword" placeholder="请输入" show-password></el-input>
        </el-form-item>

        <el-form-item label="新密码：" prop="newPassword">
          <el-input v-model="passwordForm.newPassword" placeholder="请输入" show-password></el-input>
        </el-form-item>

        <el-form-item label="确认密码：" prop="confirmPassword">
          <el-input v-model="passwordForm.confirmPassword" placeholder="请输入" show-password></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitPasswordChange">确认修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "account",
  data() {
    const validateConfirmPassword = (rule, value, callback) => {
      if (value !== this.passwordForm.newPassword) {
        callback(new Error('两次输入的密码不一致!'));
      } else {
        callback();
      }
    };

    return {
      accountForm: {
        account: 'admin',
        platformName: ''
      },
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      passwordRules: {
        oldPassword: [
          { required: true, message: '请输入原始密码', trigger: 'blur' },
          { min: 6, message: '密码长度至少6位', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, message: '密码长度至少6位', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          { validator: validateConfirmPassword, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    saveAccountInfo() {
      this.$refs.accountForm.validate(valid => {
        if (valid) {
          // 这里添加保存账号信息的API调用
          this.$message.success('账号信息保存成功');
        } else {
          return false;
        }
      });
    },
    submitPasswordChange() {
      this.$refs.passwordForm.validate(valid => {
        if (valid) {
          // 这里添加修改密码的API调用
          this.$message.success('密码修改成功');
          // 清空表单
          this.passwordForm = {
            oldPassword: '',
            newPassword: '',
            confirmPassword: ''
          };
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.account-settings {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}



.box-card {
  margin-bottom: 20px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
</style>
